﻿
<%@page isELIgnored="false" pageEncoding="UTF-8" contentType="text/html; UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<link rel="stylesheet" href="${pageContext.request.contextPath}/themes/icon.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/themes/default/easyui.css">


<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min1.3.5.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.easyui.min1.3.5.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui-lang-zh_CN.js"></script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
	<!--菜单处理-->
    $(function () {
        $("#gridtable").datagrid({
            title:'图片展示列表',
            url:'${pageContext.request.contextPath}/Banner/selectByPage',
            pagination:'true',
            fit:'true',
            columns:[[
                //增加复选框；
                {checkbox:true},
                //展示图片信息；
                {title:'图片ID值',field:'bannerId'},
                {title:'图片老名称',field:'bannerOldName'},
                {title:'图片发布时间',field:'bannerDate'},
                {title:'图片',field:'bannerImageUrl',
                    formatter:function (value,data,index) {
                        return"<img src='${pageContext.request.contextPath}"+value+"' width='100px'>"
                    }
                },
                {title:'图片描叙',field:'bannerDescription'},
                {title:'图片状态',field:'bannerState',
                    formatter:function (value,data) {
                       if(value==0){
                           return"正常"
                       }else{
                           return"已删除"
                       }
                    }
                },
            ]],
            onDblClickRow:function (Index,data) {
                $("#bannerupdate").dialog("open");
                $("#updatename").val(data.bannerOldName);
                $("#updateId").val(data.bannerId);
                $("#updatedescription").val(data.bannerDescription);
                $("#updatedate").val(data.bannerDate);
                $("#updatemess").val(data.bannerState);
                $("#updatepic").prop("src",'${pageContext.request.contextPath}'+data.bannerImageUrl)
            },
            toolbar:"#toolsbut"
        })
        $("#banneradd").dialog({
            title:'添加书本面板',
            width:'400',
            height:'400',
            buttons:'#addBut',
            closed:'true'
        }),
        $("#bannerupdate").dialog({
            title:'批量添加论面板',
            width:'400',
            height:'400',
            buttons:'#addBut',
            closed:'true'
            })
    })

    function addbord() {
        $("#banneradd").dialog("open")
    }
    function dele() {
        //获取标签元素加控件名称，调用相应的方法，获取所有的选中的id值；
        var AllIds=$("#gridtable").datagrid("getSelections")
        //判断所获中的id值是否为空进行判断；
        if(AllIds.length==0){
            alert("请选择中要删除的数据！！")
        }
        //创建新的数组；
        var ids=new Array(AllIds.length);
        //在遍历的时候进行赋值给新建的数组，然后进行传递给后台进行操作数据库；
        for(var i=0;i<ids.length;i++){
            ids[i]=AllIds[i].bannerId;
        }
        alert(ids);
        //发送ajax请求
        $.ajax({
            url:"${pageContext.request.contextPath}/Banner/deleteMany",
            data:"ids="+ids,
        })
        $("#gridtable").datagrid("reload")
    }


    function addOne() {
        /*获取标签元素.控件名称，调用sumbit方法，其参数为对象类型，用花括号，请求路径，提交前的验证回掉函数，根据返回值
        来确定是否提交，操作完数据的回掉函数，用来反映操作数据库的操作结果*/
        $("#bannerform").form("submit",{
            url:"${pageContext.request.contextPath}/Banner/add",
            onSubmit:function () {
                var inf=$(this).form("validate")
                return inf
            },
        })
        $("#banneradd").dialog("close");
        $("#gridtable").datagrid("reload");

    }


    function updateMess() {

        $("#updateform").form("submit",{
            url:"${pageContext.request.contextPath}/Banner/update",
            onSubmit:function () {
                var inf = $(this).form("validate");
                return inf
            }
        });
        $("#gridtable").datagrid("reload");
        $("#bannerupdate").dialog("close");

    }

    function changePic(obj) {
	    <!--根据当前传入的标签对象-->
        var file = obj.files[0];

	    <!--获取当前标签对象的file并且下标为零的数据-->


        console.log(obj);
        console.log(file);
        console.log("file.size = " + file.size);  //file.size 单位为byte

        <!--创建文件读取对象-->
        var reader = new FileReader();

        //读取文件过程方法
        reader.onloadstart = function (e) {
            console.log("开始读取....");
        }
        reader.onprogress = function (e) {
            console.log("正在读取中....");
        }
        reader.onabort = function (e) {
            console.log("中断读取....");
        }
        reader.onerror = function (e) {
            console.log("读取异常....");
        }
        reader.onload = function (e) {
            console.log("成功读取....");

            var img = document.getElementById("updatepic");
            img.src = e.target.result;
            //或者 img.src = this.result;  //e.target == this
        }

        reader.readAsDataURL(file)
    }
</script>

</head>
<body>
<table id="gridtable">
</table>
<div id="toolsbut">
    <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-search'"></a>
    <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove'" onclick="dele()">批量删除</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add'" onclick="addbord()">添加</a>
    <a href="javascript:void(0)" class="easyui-linkbutton"data-options="iconCls:'icon-add'" onclick="addMbord()">批量添加</a>
</div>
<div id="banneradd">
    <form id="bannerform" method="post" enctype="multipart/form-data" >
        图片名称：<input  name="bannerOldName"><br/>
        图片的上传时间：<input name="bannerDate"><br/>
        图片的存储路径：<input  type="file" name="mypicture"><br/>
        图片叙述：<input  name="bannerDescription"><br/>
        图片状态：<input  name="bannerState">
        <input type="button" onclick="addOne()" value="添加">
    </form>
</div>
<div id="bannerupdate">
    <form id="updateform" method="post" enctype="multipart/form-data">
        <input type="hidden" id="updateId" name="bannerId">
        图片老的名称：<input id="updatename" name="bannerOldName"><br/>
        图片上传的时间：<input id="updatedate" name="bannerDate"><br/>
        图片的状态：<input id="updatemess" name="bannerState"><br/>
        图片叙述：<input id="updatedescription" name="bannerDescription"><br/>
        图片展示:<img id="updatepic" src="" width="100px"><br>
        <input  type="file" name="multipartFile"><br/>
        <input type="button" onclick="updateMess()" value="修改">
    </form>
</div>

</body>
</html>